<template>
  <div class="echartsStatistics">
    <div
      :style="{ height: '600%', width: '100%' }"
      ref="myHomeStatistics"
    ></div>
  </div>
</template>

<script>
export default {
  name: "HomeStatistics",
  components: {},
  data() {
    return {
      options: {
        title: {
          text: "Statistical Chart of Monthly Questionnaire Submission",
          textStyle: {
            fontSize: 30,
          },
          subtext:
            "The figure shows the number of questionnaires collected by the system in 2021",
        },
        tooltip: {
          //鼠标悬停显示数据描述信息卡片颜色
          backgroundColor: "rgba(204, 221, 255, 0.6)",
          trigger: "axis",
          borderColor: "#CCDDFF",
          //鼠标悬停显示数据描述信息字体颜色
          textStyle: { color: "#000000" },
        },
        legend: {
          data: ["Questionnaires", "High-risks", "New-user"],
          left: "right",
          textStyle: {
            fontSize: 20,
          },
        },
        //统计图条状数据的颜色
        //color: ["#64bbe7", "#f15d5d", "#13bd38de"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%", //控制数据区间间隔
          top: "15%", //控制到顶部间距
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            magicType: { show: true, type: ["line"] }, //改变为折线图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //保存图片
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August",
              "September",
              "October",
              "November",
              "December",
            ],
            //x轴字体大小
            axisLabel: { textStyle: { fontSize: 15 } },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            //y轴字体大小
            axisLabel: { textStyle: { fontSize: 20 } },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#D3D8DD",
              },
            },
          },
        ],
        series: [
          {
            name: "Questionnaires",
            type: "bar",
            //barWidth: 20,
            data: [241, 139, 110, 116, 179, 116, 167, 104, 112, 136, 120, 128],
          },
          {
            name: "High-risks",
            type: "bar",
            //barWidth: 20,
            data: [141, 149, 120, 156, 179, 116, 67, 104, 12, 36, 20, 128],
          },
          {
            name: "New-user",
            type: "bar",
            //barWidth: 20,
            data: [41, 49, 12, 56, 79, 16, 67, 14, 22, 36, 20, 28],
          },
        ],
      },
    };
  },
  mounted() {
    this.perMonthQuestionnaire();
  },
  methods: {
    perMonthQuestionnaire() {
      let myChart = this.$echarts.init(this.$refs.myHomeStatistics);
      myChart.setOption(this.options);
    },
  },
};
</script>

<style>
.test {
  background: #13bd38de;
}
</style>